<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Dive Into HTML5</title>
        <style type="text/css">
            canvas {
                border: 1px solid black;
                margin-right: 20px;
            }
        </style>
    </head>
    <body>
        <script>
            var $ = function(id){
                return document.getElementById(id);
            }
        </script>
        <h1>Canvas </h1>
        <h2 style="clear: both;">Rect </h2>
        <canvas id="a" width="500" height="375" style="float: left;">
        </canvas>
        <form>
            <textarea id='draw_rect' cols="80" rows="20">
                var a = $("a"); 
                var a_context = a.getContext("2d"); 
                a_context.fillRect(25,25,100,100);
                a_context.clearRect(45,45,60,60);
                a_context.strokeRect(50,50,50,50);
            </textarea>
            <input type="submit" onclick="eval($('draw_rect').value); return false;" href="#" value="Draw">
        </form><h2 style="clear: both;">Line </h2>
        <canvas id="b" width="500" height="375" style="float: left;">
        </canvas>
        <form>
            <textarea id='draw_line' cols="80" rows="20">
                var b = $("b"); 
                var b_context = b.getContext("2d");  
                for (var x = 0.5; x < 500; x += 10) {
                b_context.moveTo(x, 0);
                b_context.lineTo(x, 375);
                }
                b_context.rect(50, 25, 150, 100);
                b_context.strokeStyle = "#ee";
                b_context.stroke();
            </textarea>
            <input type="submit" onclick="eval($('draw_line').value); return false;" href="#" value="Draw">
        </form><h2 style="clear: both;">Arc </h2>
        <canvas id="c" width="500" height="375" style="float: left;">
        </canvas>
        <form>
            <textarea id='draw_arc' cols="80" rows="20">
                var c = $("c");
                var c_context = c.getContext("2d");
                c_context.beginPath();
                c_context.arc(75, 75, 50, 0, Math.PI * 2, true);
                c_context.moveTo(110, 75);
                c_context.arc(75, 75, 35, 0, Math.PI, false);
                c_context.moveTo(65, 65);
                c_context.arc(60, 65, 5, 0, Math.PI * 2, true);
                c_context.moveTo(95, 65);
                c_context.arc(90, 65, 5, 0, Math.PI * 2, true);
                c_context.stroke();
            </textarea>
            <input type="submit" onclick="eval($('draw_arc').value); return false;" href="#" value="Draw">
        </form><h2 style="clear: both;">Image </h2>
        <img id="g" src="http://www.google.com.hk/images/srpr/nav_logo13.png" alt="Google logo">
        <canvas id="d" width="500" height="375" style="float: left;">
        </canvas>
        <form style="float:left;">
            <textarea id='draw_image' cols="80" rows="20">
                var d = $("d");
                var d_context = d.getContext("2d");
                var g = $("g");
                d_context.drawImage(g, 40, 40);
                d_context.drawImage(g, 30, 30, 40, 40);
                d_context.drawImage(g, 10, 10, 60, 60, 10, 10, 30, 30);
            </textarea>
            <input type="submit" onclick="eval($('draw_image').value); return false;" href="#" value="Draw">
        </form><h2 style="clear: both;">Text </h2>
        <canvas id="e" width="500" height="375" style="float: left;">
        </canvas>
        <form style="float:left;">
            <textarea id='draw_text' cols="80" rows="20">
                var e = $("e");
                var e_context = e.getContext("2d");
                e_context.font = "bold 12px sans-serif";
                e_context.textBaseline = "top";
                e_context.fillText("x", 248, 43);
                e_context.textAlign = "right";
                e_context.textBaseline = "bottom";
                e_context.fillText("y", 248, 43);
            </textarea>
            <input type="submit" onclick="eval($('draw_text').value); return false;" href="#" value="Draw">
        </form>
    </body>
</html>